<template>
  <object :data="this.url" type="application/pdf" class="pdf-container">
    <iframe :src="this.url" class="pdf-container" style="border: none">
      抱歉，此浏览器不支持查看pdf文件
      <div @click="handleDownload">下载文件</div>
    </iframe>
  </object>
</template>

<script>
import { getHelpPdfFile } from "@/api/user";
export default {
  data() {
    // baseURL
    const isProd = process.env.NODE_ENV === "production";
    const baseURL = isProd
      ? window.location.origin
      : process.env.VUE_APP_BASE_API;
    return {
      url: `${baseURL}/book.pdf`,
    };
  },
  methods: {
    async handleDownload() {
      try {
        const res = await getHelpPdfFile();
        const aLink = document.createElement("a");
        var binaryData = [];
        binaryData.push(res);
        const blob = new Blob(binaryData);
        aLink.href = window.URL.createObjectURL(blob);
        aLink.setAttribute("download", decodeURI("book.pdf"));
        document.body.appendChild(aLink);
        aLink.click();
        document.body.removeChild(aLink);
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.pdf-container {
  width: 100%;
  height: calc(100vh - 50px);
  position: fixed;
  top: 50px;
  left: 0;
}
</style>
